<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>

    <style>

        body{
            font-family: 楷体;
            font-size:20px;
            font-weight: bold;
        }

        div[id="div1"]{
            position: absolute;
            width:auto;
            height:auto;
            background-color: rgb(255, 255, 255,0.6);
            opacity: 0.8;
            left:600px;
            top:150px;
            border-radius: 15px;
            padding: 30px;
        }

        input[type="text"]{
            border:none;
            width:180px;
            height:30px;
            border-radius: 8px;
            background-color: rgb(255, 255, 255);
        }
        input[type="password"]{
            border:none;
            width:180px;
            height:30px;
            border-radius: 8px;
            background-color: rgb(255, 255, 255);
        }
        input[id="signInSubmit"]{
            margin:10px;
            padding: 10px;
            width:180px;
            height:30px;
            border-radius: 8px;
            border-radius: 10px;
            width:80px;
            height:40px;
            opacity: 0.8;
        }
        input[id="signInReset"]{
            margin:10px;
            padding: 10px;
            width:180px;
            height:30px;
            border-radius: 8px;
            border-radius: 10px;
            width:80px;
            height:40px;
            opacity: 0.8;
        }

        span{
            color:red;
            font-size: 16px;
        }


    </style>

<body background="Imgs/登录界面背景.png">

    <img src="Imgs/登录界面背景.png" style="filter:blur(5px)" width="100%" height="100%">

    <div id="div1">
        <table id="table1" border="0" cellspacing="10px" >
        <form id="formLoadIn" action="SignInServlet" method="post">
            <tr>
                <td height="40" align="right" width=120px><label for="inputUsername">用户名 ：</label></td>
                <td width="200px" align="center"><input type="text" name="inputUsername" id="inputUsername"></td>
                <td id="wrongInputUsername" style="display:none"> 
                    <span id="usernameSpanF" style="display:none;">×用户名必须为2-12位</span>
                </td>
            </tr>
            <tr>
                <td height="40" align="right" width=100px>
                    <label for="inputPassword1">密码 ：</label>
                 </td>
                <td align="center">
                    <input type="password" name="inputPassword1" id="inputPassword1">
                </td>
                <td id="wrongInputPassword1" style="display:none">
                    <span id="passwordSpanF1" style="display:none;">×密码必须大于6位</span>
                </td>
            </tr>
            <tr>
                <td height="40" align="right" width=100px>
                    <label for="inputPassword2">确认密码 ：</label>
                 </td>
                <td align="center">
                    <input type="password" name="inputPassword2" id="inputPassword2">
                </td>
                <td id="wrongInputPassword2" style="display:none">
                    <span id="passwordSpanF2" style="display:none;">×密码必须大于6位</span>
                    <span id="passwordSpanF3" style="display:none;">×两次输入的密码不一致</span>
                </td>
            </tr>
            <tr>
                <td height="40" align="right" width=100px>
                    <label for="inputPassword1">爱好 ：</label>
                 </td>
                <td align="center">
                    <input id="inputHobbies1" name="inputHobbies" type="checkbox" value="sports"><label for="inputHobbies1">运动</label>
                    <input id="inputHobbies2" name="inputHobbies" type="checkbox" value="travel"><label for="inputHobbies2">旅游</label>
                    <input id="inputHobbies3" name="inputHobbies" type="checkbox" value="sing"><label for="inputHobbies3">K歌</label>
                </td>
            </tr>
            <tr>
                <td height="40" align="right" width=120px><label for="inputTel">手机号码 ：</label></td>
                <td align="center"><input type="text" name="inputTel" id="inputTel"></td>
                <td id="wrongInputTel" style="display:none">
                    <span id="telSpanF" style="display:none;">×手机号码必须为11位</span>
                </td>
            </tr>
            <tr>
                <td height="40" align="right" width=120px><label for="inputLocation">地址 ：</label></td>
                <td align="center"><input type="text" name="inputLocation" id="inputLocation"></td>
                <td id="wrongInputLocation" style="display:none">
                    <span id="locationSpanF" style="display:none;">×请正确输入地址信息</span>
                </td>
            </tr>
             <tr>
                <td height="40" align="right" width=100px>
                    <label for="inputGender">性别 ：</label>
                 </td>
                <td align="center">
                    <input id="gender1" name="inputGender" type="radio" value="man" checked="true"><label for="gender1">先生</label>
                    <input id="gender2" name="inputGender" type="radio" value="female"><label for="gender2">女士</label>
                </td>
                <td id="wrongInputGender" style="display:none">
                    <span id="genderSpanF" style="display:none;">×请选择性别</span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center" height="60px">
                    <input id="signInSubmit" type="submit" value="注册">
                    <input id="signInReset" type="reset" value="重置">
                </td>
            </tr>
            
        </form>
        </table>
        </div>

        <script>
            const str1=document.getElementById("inputUsername");
            
            str1.onblur=checkusername;
            function checkusername(){
                const username=str1.value.trim();
                if(username.length>=2 && username.length<=12){
                    document.getElementById("wrongInputUsername").style.display="none";
                    document.getElementById("usernameSpanF").style.display='none';
                    return true;
                }else{
                    document.getElementById("wrongInputUsername").style.display="";
                    document.getElementById("usernameSpanF").style.display="";
                    return false;
                }
            }

            const str2=document.getElementById("inputPassword1");
            
            str2.onblur=checkpassword1;
            function checkpassword1(){
                const password1=str2.value.trim();
                if(password1.length>=6){
                    document.getElementById("wrongInputPassword1").style.display="none";
                    document.getElementById("passwordSpanF1").style.display='none';
                    return true;
                }else{
                    document.getElementById("wrongInputPassword1").style.display="";
                    document.getElementById("passwordSpanF1").style.display="";
                    return false;
                }
            }
            
            const str3=document.getElementById("inputPassword2");
            
            str3.onblur=checkpassword2;
            function checkpassword2(){
                const password2=str3.value.trim();
                if(password2.length>=6){
                    document.getElementById("wrongInputPassword2").style.display="none";
                    document.getElementById("passwordSpanF2").style.display='none';
                    if(document.getElementById("inputPassword1").value!=document.getElementById("inputPassword2").value){
                        document.getElementById("wrongInputPassword2").style.display="";
                        document.getElementById("passwordSpanF3").style.display="";
                    }else{
                        document.getElementById("wrongInputPassword2").style.display="none";
                        document.getElementById("passwordSpanF3").style.display="none";
                    }
                    return true;
                }else{
                    document.getElementById("wrongInputPassword2").style.display="";
                    document.getElementById("passwordSpanF2").style.display="";
                    return false;
                }
            }

            const str4=document.getElementById("inputTel");
            
            str4.onblur=checkTel;
            function checkTel(){
                const tel=str4.value.trim();
                if(tel.length==11){
                    document.getElementById("wrongInputTel").style.display="none";
                    document.getElementById("telSpanF").style.display='none';
                    return true;
                }else{
                    document.getElementById("wrongInputTel").style.display="";
                    document.getElementById("telSpanF").style.display="";
                    return false;
                }
            }
            
			const str5=document.getElementById("inputLocation");
            
            str5.onblur=checkLocation;
            function checkLocation(){
                const location=str5.value.trim();
                if(location.length>0){
                    document.getElementById("wrongInputLocation").style.display="none";
                    document.getElementById("locationSpanF").style.display='none';
                    return true;
                }else{
                    document.getElementById("wrongInputLocation").style.display="";
                    document.getElementById("locationSpanF").style.display="";
                    return false;
                }
            }
            
            document.getElementById("formLoadIn").onsubmit=function(){
                if(checkusername && checkpassword1 && checkpassword2 && checkTel && checkLocation){
                    return true;
                }else{
                    return false;
                }
            }

        
            </script>

</body>
</html>